<template>
  <div class="main-business-item" :class="type">
    <div class="main-business-top">
      <div class="business-title">{{ title }}</div>
      <div class="business-tips">
        <img src="@/assets/image/home-main-icon.png" class="icon" alt="" />
        {{ titleTips }}
        <div class="tips-btn" @click="detailsClick">点击获取 >></div>
      </div>
      <!-- <img src="@/assets/image/header-close.png" class="top-bg" /> -->
    </div>
    <div class="main-business-content">
      <div class="business-info-content">
        <div
          class="business-info-box"
          v-for="(item, index) in cotentList"
          :key="index + '-cotentList'"
        >
          <div class="business-info-title">· {{ item.title }}</div>
          <div class="business-info-text">
            {{ item.text }}
          </div>
        </div>
      </div>
      <div class="business-price-centent">
        <div class="price-centent-flex">
          <div class="business-price-box">
            <span class="business-price">￥{{ price }}</span>
            <span class="business-price-unit">/{{ unit }}</span>
          </div>
        </div>
        <div class="price-centent-flex business-buy">
          <com-button
            type="primary"
            radius="radius-small"
            class="business-buy-btn"
            @click="buyClick"
            >立即购买</com-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, defineEmits, computed } from "vue";
import comButton from "@/components/com-button/com-button.vue";
interface CotentItem {
  title: string;
  text: string;
}
interface Props {
  /**色 类型 */
  type: "left" | "right";
  /**标题 */
  title: string;
  /**标题提示 */
  titleTips: string;
  /**内容列表  */
  cotentList: CotentItem[];
  /**价格 */
  price: number;
  /**价格单位 */
  unit?: string;
}
interface Events {
  (e: "onDetailsClick"): void;
  (e: "onBuyClick"): void;
}

withDefaults(defineProps<Props>(), {
  type: "left",
  title: "",
  titleTips: "",
  cotentList: () => {
    return [];
  },
  price: 0,
  unit: "年",
});
const emits = defineEmits<Events>();

const detailsClick = () => {
  emits("onDetailsClick");
};

const buyClick = () => {
  emits("onBuyClick");
};
</script>
<style lang="less">
@import "@/style/var.less";
@import "./index.less";
</style>
